﻿@page "/tree-grid/remote-data"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons 
@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the way of binding remote services to the Tree Grid component. Here, the DataManager is used to bind the remote data with Tree Grid. You can load the child records also along with the parent records while loading data on-demand by enabling the <code>LoadChildOnDemand</code> property of Tree Grid.</p>
</SampleDescription>
<ActionDescription>
    <p>Tree Grid can be bound to remote services by assigning the <code>DataSource</code> property with the instance of DataManager.</p>
    <p>The SfDataManager, which will act as an interface between the service endpoint and the Tree Grid, will require the below minimal information to interact with service endpoint properly.</p>
    <ul>
        <li><code>SfDataManager->Url</code> - Defines the service endpoint to fetch data</li>
        <li><code>SfDataManager->Adaptor</code> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for remote binding.</li>
    </ul>
    <p>Adaptor is responsible for processing response and request from/to the service endpoint. <strong>syncfusion/ej2-data</strong> package provides some predefined adaptors which are designed to interact with particular service endpoints. They are,</p>
    <ul>
        <li><code>UrlAdaptor</code> - Use this to interact any remote services. This is the base adaptor for all remote based adaptors.</li>
        <li><code>ODataAdaptor</code> - Use this to interact with OData endpoints.</li>
        <li><code>ODataV4Adaptor</code> - Use this to interact with OData V4 endpoints.</li>
        <li><code>WebApiAdaptor</code> - Use this to interact with Web API created under OData standards.</li>
    </ul>
    <p>More information on the data binding can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/data-binding/?no-cache=1' > documentation</a> section.</p>
</ActionDescription>


<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        <div class="row">
              <SfTreeGrid @ref="treeGrid" TValue="SelfReferenceData" Query="@GridQuery" LoadChildOnDemand="@loadchildondemand" IdMapping="TaskID" ParentIdMapping="ParentItem" Height="315" TreeColumnIndex="1" AllowPaging="true" HasChildMapping="isParent">
                <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="90" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="135"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="105"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <table id="property" title="Properties" style="width: 100%;">
        <tr style="height: 50px">
            <td>
                <SfCheckBox @bind-Checked="@loadchildondemand" @onchange="onChange" Label="Load with Child"></SfCheckBox>
            </td>
        </tr>
    </table>
</div>

@code{

    public bool loadchildondemand { get; set; } = false;

    public Query GridQuery { get; set; }

    SfTreeGrid<SelfReferenceData> treeGrid { get; set; }

    public void onChange(ChangeEventArgs args)
    {
        this.GridQuery = new Query().AddParams("loadchildondemand", true);
    }

}